HTML5 Data and Services Cookbook

Table of Contents

HTML5 Data and Services Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Display of Textual Data

Introduction

Rounding numbers for display

Getting ready

How to do it...

How it works…

There's more...

Padding numbers

Getting ready

How to do it...

How it works…

There's more...

Displaying metric and imperial measurements

Getting ready

How to do it...

How it works...

Displaying formatted dates in the user's time zone

Getting ready

How to do it...

How it works…

There's more...

Displaying the dynamic time that has elapsed

Getting ready

How to do it...

How it works…

There's more...

Displaying Math

Getting ready

How to do it...

How it works…

There's more...

Creating an endless scrolling list

Getting ready

How to do it...

How it works...

There's more...

Creating a sortable paginated table

Getting ready

How to do it...

How it works...

There's more...

Creating multiple-choice filters

Getting ready

How to do it...

How it works...

Creating range filters

Getting ready

How to do it...

How it works...

Creating combined complex filters

Getting ready

How to do it...

How it works...

There's more...

Displaying code in HTML

Getting ready

How to do it...

How it works…

There's more…

Rendering Markdown

How to do it...

How it works...

There's more...

Autoupdating fields

Getting ready

How to do it...

How it works…

There's more...

2. Display of Graphical Data

Introduction

Creating a line chart

Getting ready

How to do it...

How it works...

There's more...

Creating a bar chart

Getting ready

How to do it...

How it works...

Creating a pie chart

Getting ready

How to do it...

How it works...

There's more...

Creating an area chart

Getting ready

How to do it...

How it works...

There's more...

Displaying combined charts

Getting ready

How to do it...

How it works...

There's more...

Creating a bubble chart

How to do it...

How it works...

There's more...

Showing a map with a marked location

How to do it...

How it works...

Showing a map with a path

How to do it...

How it works...

Displaying gauges

How to do it...

How it works...

Displaying a tree

Getting ready

How to do it...

How it works…

There's more...

LED scoreboard using web fonts

Getting ready

How to do it...

How it works…

There's more...

3. Animated Data Display

Introduction

Making a motion chart

Getting ready

How to do it...

How it works...

There's more...

Displaying a force directed graph

Getting ready

How to do it...

How it works...

There's more...

Making a live range chart filter

Getting ready

How to do it...

How it works...

Making an image carousel

Getting ready

How to do it...

How it works...

Zooming and panning a chart

Getting ready

How to do it...

How it works...

Using the web notifications API

Getting ready

How to do it...

How it works...

Creating interactive Geo charts from a dataset

Getting ready

How to do it...

How it works...

There's more...

4. Using HTML5 Input Components

Introduction

Using the text input field

How to do it...

How it works...

There's more...

Using textarea

How to do it...

How it works...

Inputting dates

How to do it...

How it works...

Inputting time

How to do it...

How it works...

Telephone input

How to do it...

How it works...

There's more...

Range input field

How to do it...

How it works...

There 's more...

Color picker input

How to do it...

How it works...

Using single-choice dropdowns

How to do it...

How it works...

There's more...

Using multiple-choice select lists

How to do it...

How it works...

Getting geographical location input

How to do it...

How it works...

There's more...

Using file inputs at the client side

How to do it...

How it works...

There's more...

Using a drag-and-drop file area

How to do it...

How it works...

There's more...

5. Custom Input Components

Introduction

Using contentEditable for basic rich text input

How to do it...

How it works...

Advanced rich text input

Getting ready

How to do it...

How it works...

There's more…

Creating a drop-down menu

Getting ready

How to do it...

How it works...

Creating custom dialogs

Getting ready

How to do it...

How it works...

Creating autocomplete for input

Getting ready

How to do it...

How it works...

There's more...

Creating a custom single-selection list

Getting ready

How to do it...

How it works...

There's more...

Creating a multiple-selection list

Getting ready

How to do it...

How it works...

Geographic location input using maps

Getting ready

How to do it...

How it works...

6. Data Validation

Introduction

Validating text by length

How to do it...

How it works...

There's more...

Validating numbers by range

How to do it...

How it works...

Using the built-in pattern validation

How to do it...

How it works...

There's more...

Advanced use of built-in constraints and custom validations

How to do it...

How it works...

There's more...

Calculating password strength

Getting ready

How to do it...

How it works...

Validating US zip codes

Getting ready

How to do it...

How it works...

Using asynchronous server-side validation

Getting ready

How to do it...

How it works...

Combining client-side and server-side validation

Getting ready

How to do it...

How it works...

7. Data Serialization

Introduction

Deserializing JSON to JavaScript objects

How to do it...

How it works...

There's more...

Serializing objects to a JSON string

How to do it...

How it works...

There's more...

Decoding base64 encoded binary data

Getting ready

How to do it...

How it works...

Encoding binary data or text into base64

How to do it...

How it works...

There's more...

Serializing binary data into JSON

How to do it...

How it works...

There's more...

Serializing and deserializing cookies

Getting ready

How to do it...

How it works...

There's more...

Serializing a form into request strings

How to do it...

How it works...

There's more...

Reading XML documents with DOMParser

How to do it...

How it works...

Serialization of XML document at the client side

How to do it...

How it works...

There's more...

8. Communicating with Servers

Creating an HTTP GET request to fetch JSON

Getting ready

How to do it...

How it works...

There's more...

Creating a request with custom headers

Getting ready

How to do it...

How it works...

There's more...

Versioning your API

Getting ready

How to do it...

How it works...

There's more...

Fetching JSON data with JSONP

Getting ready

How to do it...

How it works...

There's more...

Reading XML data from server

Getting ready

How to do it...

How it works...

There's more...

Using the FormData interface

Getting ready

How to do it...

How it works...

Posting a binary file to the server

Getting ready

How to do it...

How it works...

There's more…

Creating an SSL connection with Node.js

Getting ready

How to do it...

How it works...

There's more...

Making real-time updates with Ajax Push

Getting ready

How to do it...

How it works...

There's more...

Exchanging real-time messages using WebSockets

Getting ready

How to do it...

How it works...

9. Client-side Templates

Introduction

Rendering objects using Handlebars

Getting ready

How to do it...

How it works...

Rendering objects using EJS

Getting ready

How to do it...

How it works...

There's more...

Rendering objects using Jade

Getting ready

How to do it...

How it works...

Rendering arrays using Handlebars

Getting ready

How to do it...

How it works...

Rendering arrays using EJS

Getting ready

How to do it...

How it works...

There's more...

Rendering arrays using Jade

Getting ready

How to do it...

How it works...

There's more...

Simplifying templates with helpers in Handlebars

Getting ready

How to do it...

How it works...

Reusing templates with partials in Handlebars

Getting ready

How to do it...

How it works...

There's more...

Reusing templates with partials in EJS

Getting ready

How to do it...

How it works...

There is more...

Using filters in Jade

Getting ready

How to do it...

How it works...

Using mixins in Jade

Getting ready

How to do it...

How it works...

Using layouts and blocks in Jade

Getting ready

How to do it...

How it works...

10. Data Binding Frameworks

Introduction

Creating a basic Angular view with data binding

Getting ready

How to do it...

How it works...

There's more...

Rendering lists and using Angular controllers

How to do it...

How it works...

There's more...

Routing, filters, and backend services in Angular

How to do it...

How it works...

There's more…

Using Angular's client-side validation

How to do it...

How it works...

Making a chart component with Angular directives

Getting ready

How to do it...

How it works...

There's more…

Structuring applications for Meteor.js

Getting ready

How to do it...

How it works...

There's more...

Reactive programming and data in Meteor.js

Getting ready

How to do it...

How it works...

There's more...

Live HTML and user-specific data in Meteor.js

Getting ready

How to do it...

How it works...

There's more...

Security mechanisms in Meteor.js

Getting ready

How to do it...

How it works...

There's more...

11. Data Storage

Introduction

Data URI

Getting ready

How to do it...

How it works...

There's more...

Session and local storage

Getting ready

How to do it...

How it works...

There's more...

Reading data from files

How to do it...

How it works...

There's more...

Using IndexedDB

How to do it...

How it works...

There's more...

Limits of the storage and how to ask for more

How to do it...

How it works...

There's more...

Manipulating the browser history

Getting ready

How to do it...

How it works...

12. Multimedia

Introduction

Playing audio files

Getting ready

How to do it...

How it works...

Playing video files

Getting ready

How to do it...

How it works...

There's more...

Customizing controls for media elements

Getting ready

How to do it...

How it works...

Adding text to your video

Getting ready

How to do it...

How it works...

There's more...

Embedding multimedia

Getting ready

How to do it...

How it works...

There's more...

Converting text to speech using HTML5 audio

Getting ready

How to do it...

How it works...

There's more..

A. Installing Node.js and Using npm

Introduction

Installing Node.js

Using npm

Installing a local package

Installing a global package

B. Community and Resources

WHATWG

World Wide Web Consortium

Other resources

Index

HTML5 Data and Services Cookbook

HTML5 Data and Services Cookbook

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2013

Production Reference: 2270813

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78355-928-2

www.packtpub.com

Cover Image by Jarosław Blaminsky (<milak6@wp.pl>)

Credits

Authors

Gorgi Kosev

Mite Mitreski

Reviewers

Rade Despodovski

Santiago Martín-Cleto

Kevin Roast

Ljubomir Zivanovic

Acquisition Editor

Mary Nadar

Lead Technical Editor

Anila Vincent

Technical Editors

Dipika Gaonkar

Kapil Hemnani

Krishnaveni Haridas

Dennis John

Anita Nayak

Project Coordinator

Hardik Patel

Proofreader

Clyde Jenkins

Indexer

Rekha Nair

Graphics

Sheetal Aute

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Authors

Gorgi Kosev is the lead software engineer at CreationPal, where he currently works on development of mobile and desktop HTML5 applications, as well as cloud solutions based on Node.js. He is also responsible for the selection and development of the technology stack used in CreationPal products, such as SportyPal and Appzer for Google Docs.

He completed his graduation in Electrical Engineering from University of Ss. Cyril and Methodius in 2008, and his Masters in Intelligent Information Systems in 2011. His research interests includes collaborative computer systems and machine learning.

In his spare time, he enjoys sharing code and hardware hacks with members of the local hack lab and playing the piano.

I would like to thank Svetle for her patience, support, and understanding during the restless nights and weekends spent writing this book.

Mite Mitreski works on custom enterprise application development with primary focus on Java and JVM-based solutions. He has worked as a programming course trainer in the past. He is deeply involved in activities surrounding development groups in Macedonia, where he is currently the JUG Leader of Java User Group, Macedonia. Mite has a great passion for free and open source software, open data formats, and the open web. Occasionally, he writes at his blog at http://blog.mitemitreski.com and can be reached on Twitter, his Twitter handle being @mitemitreski.

I would first like to thank my brother Stojan, who has been my inspiration throughout the years and was always someone to look up to. Thanks also 
to my great parents who raised me up to the person I'm today. I would also like to thank my girlfriend Marija and all the friends and colleagues at Netcetera who had to put up with me while I was away or half present. Thanks to all the reviewers, as well as the team at Packt Publishing who made the book happen. And last but not the least, thanks to W3C, the Mozilla team, Apache Software Foundation, and all of you who work on open technologies and make or keep the Internet free and open so the 
rest of us can enjoy it each day.

About the Reviewers

Rade Despodovski graduated from the Faculty of Electrical Engineering and Information Technologies in Skopje, Macedonia, in the year 2011 as a software engineer. He has been developing and using Microsoft technologies for eight years. In the last two years, his professional efforts have been concentrated on web technologies, in particular, using HTML5 and JavaScript. At present, his biggest interests lay in the development of multiplatform applications based on open-source technologies. Contact Rade at <rade.despodovski@gmail.com>.

Santiago Martín-Cleto started his career as a web designer for an outstanding Spanish media group in 1999. Passionate about design and code, he considers himself as a web standards and open source advocate. He has been involved in huge projects for mass media and financial corporations as a contributor to launch start-ups. As a front-end developer, he is specialized in high traffic websites performance issues.

He has also reviewed HTML5 Enterprise Application Development, published by Packt Publishing.

Kevin Roast is a front-end software developer with 15 years professional experience and a lifelong interest in computer science and computer graphics. He has developed software for several companies and is a founding developer at Alfresco Software Ltd. He is very excited by the prospect of the HTML5 standardization of the web and the progress of web-browser software in recent years. He was also the co-author of a book Professional Alfresco: Practical Solutions for Enterprise Content Management, Wrox and has been a technical reviewer on several HTML5 and software development related books.

I would like to thank my wife for putting up with me tapping away in the evenings reviewing book chapters and to my three lovely kids Ben, Alex, 
and Izzy.

Ljubomir Zivanovic is a senior software developer at Netcetera and lead of Microsoft Competence Center within the company. He has over a decade of experience in the software industry, mainly focused on web stack and front-end technologies that affect UX in every way. One of the founders of the Macedonian .NET User Group, devoted husband and father, and a passionate amateur photographer.

I would like to thank both the authors of this book for giving me the opportunity to work on this book as a reviewer; it was an extraordinary experience for me. I would also like to express my gratitude to my beloved wife for giving me the support and understanding what every passionate developer can only think of.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

HTML5 is everywhere, from PCs to tablets, smartphones, and even modern TV sets. The web is the most ubiquitous application platform and information medium. More recently, HTML5 has become a first-class citizen in established operating systems such as Microsoft Windows 8, Firefox OS, and Google Chrome OS.

Openness is one of the important aspects of the web. HTML5 is one of the primary ways to oppose private and proprietary solutions that force the usage of certain technologies. There is a true revolution happening in the past few years. JavaScript has risen to the lead position in web application development for both server side and client side.

In the past, it was very common to get half done scripts and poorly written JavaScript, thus the language formed a bad reputation. HTML5 features are already available and widely underused. There is a huge deal of web applications that reinvent the wheel, when there is already a feature in HTML5 that they need.

This book will get you on the fast track to learning modern HTML5 features. By the end of the book, you should have a solid understanding of JavaScript in the browser and server. On top of that, you will end up creating cool, little applications using new HTML5 technologies, and learn how to adapt your existing applications to use these great new features.

What this book covers

Chapter 1, Display of Textual Data, covers what you need to know about displaying text in HTML5. This includes formatting numbers, displaying math formulas, and measurements. Additionally, there are sections on displaying tabular data and rendering Markdown that show some of the everyday development functionality.

Chapter 2, Display of Graphical Data, begins by covering the creation of charts using the Flot chart library, as well as the more modern data-driven D3.js. Displaying maps with routes and markers is also covered in this chapter.

Chapter 3, Animated Data Display, explores the creation of animated and interactive visualizations. Most of the chapter visualization are based on D3.js, but there are also examples that start from scratch or use technology such as the notifications API.